<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="60%"
      @close="closeDialog"
      @open="getQuestionsId">
      <el-row type="flex" class="row-bg" >
        <el-col :span="6">【题型】：{{formatQuestionType(questionType,previewObject.questionType)+ '题'}}</el-col>
        <el-col :span="6">【编号】：{{previewObject.id}}</el-col>
        <el-col :span="6">【难度】：{{formatQuestionType(difficulty,previewObject.difficulty)}}</el-col>
        <el-col :span="6">【标签】：{{previewObject.tags}}</el-col>
      </el-row>
      <el-row type="flex" class="row-bg" >
        <el-col :span="6">【学科】：{{previewObject.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{previewObject.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{previewObject.direction}}</el-col>
      </el-row>
      <hr>
      <el-row type="flex" class="row" >
        <el-col :span="6">【题干】：</el-col>
      </el-row>
      <el-row type="flex" class="row" v-if="previewObject.question">
        {{matchReg(previewObject.question)}}
      </el-row>
      <el-row type="flex" class="row" v-if="previewObject.questionType == 1 || previewObject.questionType == 2">
        {{formatQuestionType(questionType,previewObject.questionType)+ '题'}}选项：（以下选中的选项为正确答案）
      </el-row>
        <el-checkbox-group v-model="getCheckRadioValue" v-if="previewObject.questionType == 2">
          <el-checkbox v-for="item in previewObject.options" :label="item.id" :key="item.id" :title="item.title"></el-checkbox>
        </el-checkbox-group>
      <el-radio-group v-model="getCheckRadioValue[0]" v-if="previewObject.questionType == 1">
        <el-radio v-for="item in previewObject.options" :label="item.id" :key="item.id" >{{item.title}}</el-radio>
      </el-radio-group>
      <hr>
      <el-row type="flex" class="row-bg" >
        <el-col :span="3" class="answer">【参考答案】：</el-col>
        <el-col :span="3"><el-button type="danger" @click="videoStatusControl">视频答案预览</el-button></el-col>
      </el-row>
      <el-row v-if="videoStatus">
        <div style="width: 480px; height: 270px; overflow: hidden;" >
          <video :src="previewObject.videoURL" controls style="width: 100%; height: 100%; object-fit: fill"></video>
        </div>
      </el-row>
      <hr>
      <el-row type="flex" class="row-bg" >
        <el-col :span="12" class="answer">【答案解析】：{{previewObject.remarks}}</el-col>
      </el-row>
      <hr>
      <el-row type="flex" class="row-bg" >
        <el-col :span="12" class="answer">【题目备注】：{{previewObject.remarks}}</el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {detail as questionDetail} from "@/api/hmmm/questions"
import { questionType, difficulty, direction, publishType } from "@/api/hmmm/constants";
export default {
  data(){
    return {
      previewObject:{},
      questionType: questionType,
      difficulty: difficulty,
      direction: direction,
      publishType:publishType,
      getCheckRadioValue:[],
      videoStatus:false
    }
  },
  props:{
    dialogVisible:{
      type:Boolean,
      default:false
    },
    questionsId:{
      type:Number,
      required:true
    }
  },
  methods:{
    closeDialog(){
      this.$emit('dialog-close')
    },
    async getQuestionsId(){
      const res = await questionDetail({id:this.questionsId})
      this.previewObject = res.data
      this.getCheckRadioValue = this.getArr(this.previewObject.options)
      console.log(this.getCheckRadioValue);
    },
    // getArr
    getArr(arr){
      return arr.filter(item=>{
        return item.isRight === 1
      }).map(item=>{
        return item.id
      })
    },
    formatQuestionType(state,value){
      const arr = state.filter(item =>{
          return item.value == value
      })
      if (arr.length > 0) {
        return arr[0].label
      }
    },
    matchReg(str){
      let reg=/<\/?.+?\/?>/g;
      return str.replace(reg,'')
    },
    videoStatusControl(){
      this.videoStatus = !this.videoStatus
    }
  }
}

</script>

<style scoped lang='scss'>
  .row-bg {
    height: 40px;
    .answer {
      margin-top: 10px;
    }
  }
  .row{
    height: 20px;
    margin-bottom: 10px;
  }
  ::v-deep {
    .el-radio, .el-checkbox {
      display: block;
    }
  }
</style>
